<template>
	<div>
		<el-form ref="configForm" :model="form" :rules="rules" label-position="top">
			<div class="base-container">
				<p class="title">申请文件记录号</p>
				<div class="flex items-center mb-8px">
					<span class="prefix">*</span>
					<el-tooltip
						content="记录号为发卡机构公钥证书申请记录号，每次申请时需要填写，长度为6位数字，首位有效数字前填零，例如：000001"
						placement="top-start">
						<el-icon :size="14" color="#8E8E8E">
							<QuestionFilled />
						</el-icon>
					</el-tooltip>
					<p class="sub-title">记录号</p>
				</div>
				<el-form-item label="" prop="requestNum">
					<el-input v-model="form.requestNum" maxlength="6" placeholder="请输入" />
				</el-form-item>
			</div>
			<div style="height: 10px"></div>
			<div class="base-container">
				<p class="title">证书失效日期</p>
				<div class="flex items-center mb-8px">
					<span class="prefix">*</span>
					<el-tooltip
						content="证书失效日期输入格式为：月和年（ＭＭＹＹ），代表在该月最后一天之后证书失效"
						placement="top-start">
						<el-icon :size="14" color="#8E8E8E">
							<QuestionFilled />
						</el-icon>
					</el-tooltip>
					<p class="sub-title">失效日期</p>
				</div>
				<el-form-item label="" prop="date">
					<el-date-picker
						v-model="form.date"
						:clearable="false"
						type="month"
						format="YYYY-MM"
						value-format="MMYY"
						style="width: 100%"
						:disabled-date="disabledDate"
						placeholder="请选择"></el-date-picker>
				</el-form-item>
			</div>
		</el-form>

		<div class="page-footer">
			<el-button @click="onCancel">上一步</el-button>
			<el-button type="primary" @click="onConfirm">下一步</el-button>
		</div>
	</div>
</template>

<script setup>
import { createCardPubKeyCaRequestFile, getCertificateManagementDetail } from '@/api/bus/certificateManagement'

const route = useRoute()
const { proxy } = getCurrentInstance()

const emits = defineEmits(['cancel', 'confirm'])

const back = computed(() => {
	return route.query.back || 0
})

const flowId = computed(() => {
	return Number(route.query.id) || null
})

const configForm = ref()
const form = ref({
	requestNum: null,
	date: null
})

function disabledDate(date) {
	date = proxy.parseTime(date, '{y}-{m}-{d}')
	const currentDate = proxy.parseTime(new Date(), '{y}-{m}-{d}')
	return date <= currentDate
}

function isNumber(value) {
	return /^-?\d+(\.\d+)?$/.test(value)
}

const checkRequestNum = (rule, value, callback) => {
	if (!value) {
		return callback(new Error('请输入记录号'))
	}
	if (!isNumber(value)) {
		return callback(new Error('记录号请输入数字'))
	}
	setTimeout(() => {
		if (value.length !== 6) {
			callback(new Error('记录号长度为6位'))
		} else {
			callback()
		}
	}, 100)
}

const rules = {
	requestNum: [{ required: true, validator: checkRequestNum }],
	date: [{ required: true, message: '请选择失效日期' }]
}

const pageInit = async () => {
	if (back.value == 0) return
	const res = await getCertificateManagementDetail(flowId.value)
	if (res.code == 200) {
		form.value.requestNum = res.data.requestNum
		form.value.date = res.data.caPubExpiry
	}
}

const onCancel = () => {
	emits('cancel')
}

const onConfirm = () => {
	configForm.value.validate((valid) => {
		if (valid) {
			const date = form.value.date
			const requestNum = form.value.requestNum
			const data = {
				id: flowId.value,
				date,
				requestNum
			}
			createCardPubKeyCaRequestFile(data).then((res) => {
				if (res.code == 200) {
					emits('confirm', {
						date,
						requestNum
					})
				} else {
					proxy.$modal.msgError(res.msg)
				}
			})
		}
	})
}

onMounted(() => {
	pageInit()
})
</script>

<style lang="scss" scoped>
@import './base.scss';
</style>
